<template>
    <el-table
      :data="tableData"
      border
      style="width: 85%; margin: 20px auto;border-radius: 8px; margin: 20px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }"
		:span-method="(value) => rowSpanRulesHandler(value, tableData)"
		
		 @selection-change="handleSelectionChange"
		 
		>
		
		<el-table-column
		      type="selection"
		      width="55"
			  v-if="scoreFlag">
		</el-table-column>
		
	<el-table-column prop="type" label="考核条目类型" />
    <el-table-column prop="target" label="考核条目" width="" />
    
    <el-table-column prop="scorePercent" label="考核条目占比%" width="140">
		<template #default="scope">
				{{scope.row.scorePercent}}%
		</template>
	</el-table-column>
		
    <el-table-column prop="assessorName" label="评分人" width="140"/>
    <el-table-column prop="assessorPercent" label="评分人占比%" width="140">
		<template #default="scope">
					{{scope.row.assessorPercent}}%
			</template>
	</el-table-column>
	<el-table-column prop="score" label="评分" width="140"/>
	<el-table-column prop="grade" label="考核得分" width=""/>
	<el-table-column prop="remark" label="评分说明" width=""/>
    </el-table>
    <div style="text-align: right;margin-right: 200px;margin-bottom: 20px;">总计：{{total}}分</div>
</template>

<script setup>
import {ref, onBeforeMount, reactive,getCurrentInstance,watch} from "vue";

let props = defineProps({
  scoreList: {
    type: Array,
    required: true, //是否规定必须得有
  },
  
  scoreExamine:{
	  type:Number,
	  required:true,
  },
  
  update:{
  	  type:Function,
  	  required:true,
  }
})  

watch(props, (newValue, oldValue) => {
  if(newValue.scoreExamine != 1){
	  scoreFlag = true
  }else{
	  scoreFlag = false
  }
},{ deep: true });  


var scoreFlag = false;


const Form = reactive([])
const tableData=ref(props.scoreList)
const total = ref(0);

var multipleSelection = [];

for(let item of tableData.value) {
  total.value += parseFloat(item.grade);
}
total.value = total.value.toFixed(2)


const compareSingleAttrReturnColSpan = (row, compareAttr, index, tableData) => {
  let count = 0;
    let start = index;
  
   while (start < tableData.length) {
   	
   		
   	if(start > index &&compareAttr==="scorePercent"&&row["target"] !== tableData[start]["target"]){
   		break
   	}else{
   		// 进入循环，检查下一个元素
   		if (start > index && row[compareAttr] !== tableData[start][compareAttr]) {
   			break;  // 如果不相等，则停止合并
   		}
   		count++;  // 计数相同的行
   		start++;  // 移动到下一行
   	}
   	
     
   }
  
    // 将合并的行数存储在行数据中
    if (start > index) {
      tableData[index][`${compareAttr}_count`] = count;
    }
  
    // 检查前一行的合并数量与当前行是否相等
    const previousRowCount = index > 0 ? tableData[index - 1][`${compareAttr}_count`] : 0;
    return previousRowCount === count + 1 ? [0, 0] : [count, 1];
};

const columns1 = [
  "choose",
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];

const columns2 = [
  "type",
  "target",
  "scorePercent",
  "assessorName",
  "assessorPercent",
  "score",
  "grade",
  "remark"
];


const rowSpanRulesHandler = ({  row, column, rowIndex, columnIndex }, data) => {
  //console.log(columns[columnIndex]);
  if(scoreFlag){
	  // 根据列名判断进行合并
   if (columns1[columnIndex] === "type") {
     return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
   } else if (columns1[columnIndex] === "target") {
     return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
   } else if (columns1[columnIndex] === "scorePercent") {
     return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
   }
  }else{
	  if (columns2[columnIndex] === "type") {
	    return compareSingleAttrReturnColSpan(row, "type", rowIndex, data);
	  } else if (columns2[columnIndex] === "target") {
	    return compareSingleAttrReturnColSpan(row, "target", rowIndex, data);
	  } else if (columns2[columnIndex] === "scorePercent") {
	    return compareSingleAttrReturnColSpan(row, "scorePercent", rowIndex, data);
	  }
  }
 
};

	  
const  handleSelectionChange = (val) => {
    multipleSelection = val;
	props.update(multipleSelection,"score")
}


</script>
<style lang="scss" scoped>

.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 1200px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
.el-card {
  border-radius: 10px;
}
</style>
